<!-- 房屋管理 -->
<template>
  <div>
    <div class="header">
      <div class="title" style="height: 65px">
        <div style="margin-bottom: 5px; margin-top: 5px">
          <a-space style="margin-left: 10px">
            <span>开始时间：</span>
            <a-date-picker v-model:value="startDate" :format="dateFormat" />
          </a-space>
          <a-space style="margin-left: 10px">
            <span>结束时间：</span>
            <a-date-picker v-model:value="endDate" :format="dateFormat" />
          </a-space>
          <a-space style="margin-top: 15px; margin-left: 25px">
            <span>核验来源：</span>
            <a-select ref="select" v-model:value="role_type" style="width: 120px">
              <a-select-option value="6">自查</a-select-option>
              <a-select-option value="5">村级</a-select-option>
              <a-select-option value="4">乡镇</a-select-option>
              <a-select-option value="3">区级</a-select-option>
              <a-select-option value="2">市级</a-select-option>
            </a-select>
          </a-space>
          <a-space style="margin-top: 15px; margin-left: 15px">
            <span>核验人员姓名：</span>
            <a-input
              v-model:value="nickname"
              placeholder="请输入核查人员姓名进行查询"
              style="width: 256px; margin-top: -10px"
            />
          </a-space>
          <a-space style="margin-left: 10px; margin-top: 15px">
            <span>关键字：</span>
            <a-input
              v-model:value="txtKeyWord"
              placeholder="请输入姓名、地址或房屋编号进行查询"
              style="width: 300px; margin-top: -10px"
            />
          </a-space>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <a-space class="search-btn">
            <a-button type="primary" @click="onSearch">查询</a-button>
          </a-space>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <space style="float: right; margin-right: 10px; margin-top: 15px">
            <a-button type="primary" @click="handleHoustDetailExport"> 导出明细</a-button>
          </space>
        </div>
      </div>
      <div style="width: 100%; background: #fff; height: 40px">
        <div style="width: 30%; float: left; font-size: 16px; padding-left: 20px; line-height: 37px"
          ><home-outlined two-tone-color="#eb2f96" /><span style="padding: 0px 10px">
            {{ title }}</span
          ></div
        >
        <div
          style="
            width: 30%;
            float: right;
            font-size: 16px;
            padding-left: 20px;
            line-height: 37px;
            text-align: right;
            padding-right: 20px;
          "
          ><a style="color: blue" @click="getBack"
            ><arrow-left-outlined two-tone-color="#eb2f96" style="padding: 0px 10px" />返回上一页</a
          ></div
        >
      </div>
      <a-card>
        <a-table
          :columns="computedTableColumn"
          :data-source="computedCheckTableDataList"
          :page-size-options="pageSizeOptions"
          :loading="loading"
          bordered
          :pagination="false"
          size="middle"
          :scroll="{ x: 'calc(700px + 50%)', y: tableHeight }"
        />
        <div class="pagination">
          <a-pagination
            show-size-changer
            v-model:current="pageIndex"
            v-model:pageSize="pageSize"
            :total="total"
            @show-size-change="onShowSizeChange"
          />
        </div>
      </a-card>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import moment from 'moment';
  import dayjs from 'dayjs';
  import { ref, onMounted, onBeforeMount, computed, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '/@/store/modules/user';
  import { getDCPHourseByList } from '/@/api/demo/api';
  import { useGlobSetting } from '/@/hooks/setting';
  import { downloadByUrl } from '/@/utils/file/download';
  let userInfo = ref<any>(null);
  let detailTableHeight = ref<number>(0); // 表格高度
  let tableHeight = ref<number>(200); // 表格高度
  let pageIndex = ref(1);
  let pageSize = ref(15);
  const dateFormat = 'YYYY-MM-DD';
  const startDate = ref<any>(null); // 开始时间
  const endDate = ref<any>(null); // 结束时间
  const role_type = ref<string>('3'); //关键字
  const nickname = ref<string>(''); //核验人员姓名
  const txtKeyWord = ref(''); //关键字
  const title = ref<string>('');
  let loading = ref(false);
  const pageSizeOptions = ref<string[]>(['100', '200', '300']);
  const userStore = useUserStore();
  const globSetting = useGlobSetting();
  //  调用 父组件传过来的方法

  // 使用 useRouter 创建一个 router 实例
  const route = useRoute();
  const router = useRouter();
  const { xzq, xzqdm,town,towndm,villagedm,village, category, titlename, startTime, endTime,currentTitle,roletype,txtKey,jsrysstd } = route.query;
  
  let TableSource = ref<any>([]);
  let total = ref(0);
  const columns = [
    { title: '序号', width: 50, dataIndex: 'index', key: 'index', align: 'center', fixed: 'left' },
    {
      title: '区县名称',
      dataIndex: 'xzq',
      key: 'xzq',
      align: 'center',
      width: 90,
    },
    {
      title: '乡镇名称',
      dataIndex: 'towndm',
      key: 'towndm',
      align: 'center',
      width: 100,
      scopedSlots: {customRender: 'towndm'},
      ellipsis: true, //需ant版本为1.5及以上
    },
    {
      title: '村级名称',
      dataIndex: 'villagedm',
      key: 'villagedm',
      align: 'center',
      width: 150,
      scopedSlots: {customRender: 'villagedm'},
      ellipsis: true, //需ant版本为1.5及以上
    },
    {
      title: '户主姓名',
      dataIndex: 'hzxm',
      key: 'hzxm',
      align: 'left',
      width: 150,
      scopedSlots: {customRender: 'hzxm'},
      ellipsis: true, //需ant版本为1.5及以上
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      align: 'center',
      width: 300,
      scopedSlots: {customRender: 'address'},
      ellipsis: true, //需ant版本为1.5及以上
    },
    {
      title: '房屋编号',
      dataIndex: 'fwbh',
      key: 'fwbh',
      align: 'center',
      width: 170,
      customCell: (row, index, column) => {
        let style = 'cursor:pointer;text-decoration: underline; color: blue;';
        return {
          style: style,
          class: 'cell-hover',
          onClick: async () => {
            getDetailData(row);
          },
        };
      },
    },
    {
      title: '房屋层数',
      dataIndex: 'cs',
      key: 'cs',
      align: 'center',
      width: 100,
    },
    {
      title: '现有安全出口数量',
      dataIndex: 'jzscxyaqcksl',
      key: 'jzscxyaqcksl',
      align: 'center',
      width: 150,
    },
    {
      title: '现有疏散楼梯数量',
      dataIndex: 'jzxyssltsl',
      key: 'jzxyssltsl',
      align: 'center',
      width: 150,
    },
    {
      title: '是否满足”双通道“要求',
      dataIndex: 'jsrysstd',
      key: 'jsrysstd',
      align: 'center',
      width: 170,
      scopedSlots: { customRender: 'jsrysstd' },
      ellipsis: true, //需ant版本为1.5及以上
    },
    {
      title: '检查时间',
      dataIndex: 'create_on',
      key: 'create_on',
      align: 'center',
      width: 170,
      scopedSlots: { customRender: 'jsrysstd' },
      ellipsis: true, //需ant版本为1.5及以上
    },
    {
      title: '检查人员',
      dataIndex: 'create_name',
      key: 'create_name',
      align: 'center',
      width: 170,
      scopedSlots: { customRender: 'jsrysstd' },
      ellipsis: true, //需ant版本为1.5及以上
    },
  ];
  // 计算属性，用于实时更新数据到页面上
  const computedTableColumn = computed(() => {
    let newColumn: any = [];
    newColumn = columns;
    return newColumn;
  });
  const computedCheckTableDataList = computed(() => {
    return TableSource.value;
  });
  function getUserInfo() {
    const userStore = useUserStore();
    userInfo.value = userStore?.getUserInfo;
  }
  const getCode = async () => {
    if (startTime != null && startTime != '') {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      const sTime = moment(startTime + '').format('YYYY-MM-DD');
      const eTime = moment(endTime + '').format('YYYY-MM-DD');
      const start: any = dayjs(sTime);
      const end: any = dayjs(eTime);
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      startDate.value = start;
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      endDate.value = end;
    }
    role_type.value = (roletype ?? '') + '';
    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
    txtKeyWord.value = (txtKey ?? '') + '';
  };
  const getRecordTableData = async () => {
    if (startDate.value == null) {
      let currentDate = moment().format('YYYY-MM-DD');
      const start: any = dayjs('2024-01-01');
      const end: any = dayjs(currentDate);
      startDate.value = start;
      endDate.value = end;
    }
    let params: any = {
      pageIndex: pageIndex.value,
      pageSize: pageSize.value,
      xzqdm: xzqdm,
      towndm: (towndm ?? '') + '',
      villagedm: (villagedm ?? '') + '',
      roletype: role_type.value,
      txtKeyWord: txtKeyWord.value,
      startTime: moment(startDate.value.$d).format('YYYY-MM-DD'),
      endtime: moment(endDate.value.$d).format('YYYY-MM-DD'),
      jsrysstd: jsrysstd + '',
    };
    console.log('**********params***********', params);

    loading.value = true;
    let res = await getDCPHourseByList(params);
    loading.value = false;
    let list = res.items;
    TableSource.value = list;
    total.value = res.total;
    title.value = currentTitle + '(总栋数：' + res.total + ')';
  };
  //导出
  function handleHoustDetailExport() {
    const uriBase = `${globSetting.apiBaseUrl}${globSetting.apiUrl}`;
    const tk = userStore.getToken;
    downloadByUrl({
      url:
        uriBase +
        '/targeted/sysstdExportHourseExcel?access_token=' +
        tk +
        '&startTime=' +
        startTime +
        '&endTime=' +
        endTime +
        '&xzqdm=' +
        xzqdm +
        '&towndm=' +
        (towndm ?? '') +
        '' +
        '&villagedm=' +
        (villagedm ?? '') +
        '&txtKeyWord=' +
        txtKeyWord.value +
        '&currentTitle=' +
        currentTitle +
        '&jsrysstd=' +
        jsrysstd +
        '&roletype=' +
        role_type.value,
      target: '_blank',
    });
  }
  //  搜索事件
  const onSearch = () => {
    getRecordTableData();
  };
  //根据房屋编号获取详细信息
  const getDetailData = async (row: any) => {
    console.log('=========================================');
    router.push({
      path: '/utils/houseCheckLog',
      query: {
        xzq: row.xzq,
        town: row.towndm,
        village: row.villagedm,
        hzxm: row.hzxm,
        fwbh: row.fwbh,
      },
    });
    console.log('=========================================', router);
  };
  const getBack = () => {
    router.go(-1)
  };
  const onShowSizeChange = (pageIndex: number, pageSize: number) => {
    // antDesign  自动给  pageIndex 和 pageSize 赋值
    //  pageIndex.value = pageIndex;
    //  pageSize.value = pageSize;
    // console.log('@pageIndex,pageSize', pageIndex, pageSize);
  };
  const getTableHeight = () => {
    setTimeout(() => {
      detailTableHeight.value = window.innerHeight;
      tableHeight.value = window.innerHeight + 250;
    });
  };
  watch(pageSize, () => {
    console.log('pageSize', pageSize.value);
    getRecordTableData();
  });
  watch(pageIndex, () => {
    console.log('current', pageIndex.value);
    getRecordTableData();
  });
  onBeforeMount(() => {
    getUserInfo();
  });
  onMounted(() => {
    console.log('******房屋自查、核查记录******');
    getCode();
    getRecordTableData();
    getTableHeight();
    // getTableData();
  });
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  #map {
    height: calc(100vh - 140px);
  }
  .col-sql {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .x-houseMng-search {
    z-index: 100;
    margin: 6px;
    position: absolute;
  }

  .root-house-mng-main {
    margin: 6px;
  }

  .x-village-tabs {
    //z-index: 100;
    //position: absolute;
    width: 60vw;
    margin-top: 6px;
    margin-left: 40px;
    //background-color: rgba(34, 34, 34, 0.6);
    :deep(.ant-form) {
      margin-top: 6px;
    }

    // :deep(.ant-form-item-label) > label {
    //   color: white;
    // }
  }
</style>
